<!-- src/views/admin/settings/UserSettings.vue -->
<template>
  <div class="user-settings">
    <h1>个人设置</h1>
    <el-tabs v-model="activeTab">
      <el-tab-pane label="基本信息" name="basic-info">
        <BasicInfo />
      </el-tab-pane>
      <el-tab-pane label="安全设置" name="security-settings">
        <SecuritySettings />
      </el-tab-pane>
      <el-tab-pane label="通知设置" name="notification-settings">
        <NotificationSettings />
      </el-tab-pane>
      <el-tab-pane label="个性化" name="personalization-settings">
        <PersonalizationSettings />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import BasicInfo from './components/BasicInfo.vue';
import SecuritySettings from './components/SecuritySettings.vue';
import NotificationSettings from './components/NotificationSettings.vue';
import PersonalizationSettings from './components/PersonalizationSettings.vue';

const activeTab = ref('basic-info');
</script>

<style scoped>
.user-settings {
  padding: 20px;
}
</style>
